<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-08 10:21:26
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-11-05 17:44:25
 * @FilePath: /web/src/views/bigScreen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bigScreen" :style="style" v-if="visable">
     <div class="logo">
      <div class="dateTime">
        <span>星期{{ week }}</span> {{ date }} <span>{{ time }}</span>
      </div>
      <div class="name">
        <img src="../assets/images/u9.svg" alt="" />
        <div class="title">深圳外环三期3标钢筋智造配送中心</div>
      </div>
      <div class="weather">
        <div class="num">
          <i :class="`qi-${weather.icon}`" style="margin-right: 10px"></i> <span>{{weather.temp}}℃</span>
          <div class="btn" @click="toHome">
            <i class="el-icon-monitor"></i>
          </div>
        </div>
      </div>
      <div class="nav">
        <div
          class="blue"
          :class="changeIndex == 0 ? 'select' : ''"
          @click="change(0)"
        >
          <img src="../assets/images/kuang.png" alt="" />
          首页
        </div>
        <div
          class="blue"
          :class="changeIndex == 3 ? 'select' : ''"
          @click="change(3)"
        >
          <img src="../assets/images/kuang.png" alt="" />生产
        </div>
        <div
          class="blue"
          :class="changeIndex == 1 ? 'select' : ''"
          @click="change(1)"
        >
          <img src="../assets/images/kuang.png" alt="" />质量
        </div>

        <div
          class="blue"
          :class="changeIndex == 2 ? 'select' : ''"
          @click="change(2)"
        >
          <img src="../assets/images/kuang.png" alt="" />安全
        </div>
      </div>
    </div>
    <homePage :weather="weather" v-show="changeIndex == 0" :changeIndex="changeIndex"></homePage>
    <production v-if="changeIndex == 3"></production>
    <qualityVue v-if="changeIndex == 1"></qualityVue>
    <secure v-if="changeIndex == 2"></secure>
  </div>
</template>

<script>
import "qweather-icons/font/qweather-icons.css";
import dayjs from "dayjs";
import homePage from "./indexPage/index.vue";
import qualityVue from "./indexPage/quality.vue";
import secure from "./indexPage/secure.vue";
import production from "./indexPage/production.vue";
import {getWeatherNow} from "@/api/weather";
export default {
  name: "BigScreen",
  components: {
    homePage,
    qualityVue,
    secure,
    production,
  },
  data() {
    return {
      date: dayjs().format("YYYY-MM-DD"),
      time: dayjs().format("HH:mm:ss"),
      changeIndex: 0,
      style: {},
      visable:true,
      weather: {
        icon: "100",
        temp: 8,
        humidity: 10,
		windSpeed:1
      },
    };
  },
  computed: {
    week() {
      var datas = dayjs().day();
      var week = ["日", "一", "二", "三", "四", "五", "六"];
      return week[datas];
    },
  },
  mounted() {
    var that = this;
    setInterval(function () {
      that.time = dayjs().format("HH:mm:ss");
    }, 1000);
    window.addEventListener('keydown',(event)=>{
      if (event.key === 'F11' || event.keyCode === 122) {
        this.handleResize()
      }
    } );
  },
  created() {
    this.setStyle();
    getWeatherNow().then((res) => {
      this.weather = res.data.now;
    });
  },
  methods: {
    handleResize() {
      let that = this
      this.visable = false
      setTimeout(() => {
        this.visable = true
        that.setStyle()
      }, 100);

    },
    setStyle() {
      let width = 1920;
      let height = 1080;
      this.style = {
        width: width + "px",
        height: height + "px",
        transformOrigin: "0px 0px",
      };
      let screenWidth = window.innerWidth;
      // 获取视口高度
      let screenHeight = window.innerHeight;
      let witdhScale = screenWidth / width;
      let heightScale = screenHeight / height;
      this.style.transform = `scale(${witdhScale}, ${heightScale})`;
    },
    toHome() {
      this.$router.push("/");
    },
    change(index) {
      this.changeIndex = index;
    },
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleResize);
  },
};
</script>
<style lang="scss">
html {
  background-color: #0a112b;
}
</style>
<style lang="scss" scoped>
.bigScreen {
  // margin-left: -12px;
  // width: 99.7vw;
  width: 1920px;
  height: 1080px;
  // height: 56.25vw;
  background: url(../assets/images/bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.logo {
  width: 100%;
  height: 140px;
  position: relative;

  .dateTime {
    height: 140px;
    font-size: 22px;
    color: #33ccff;
    font-weight: bold;
    position: absolute;
    top: 20%;
    left: 6%;
  }

  .name {
    width: 100%;
    height: 120px;
    position: absolute;
    top: -4px;

    img {
      margin-left: 20%;
      width: 56%;
      height: 123px;
    }

    .title {
      left: 45%;
      font-size: 48px;
      color: #43d0d4;
      font-weight: 700;
      position: absolute;
      margin-left: -295px;
      top: 20px;
    }
  }

  .weather {
    position: absolute;
    left: 6%;
    top: 45%;

    img {
      width: 30px;
      margin-right: 20px;
    }

    .num {
      display: flex;
      align-items: center;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
      color: #33ccff;
      font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
    }

    .btn {
      margin-left: 20px;
      width: 30px;
      height: 36px;
      line-height: 33px;
      // background: inherit;
      // background-color: rgba(27, 40, 63, 1);
      box-sizing: border-box;
      border-width: 1px;
      // border-style: solid;
      // border-color: rgba(102, 255, 255, 1);
      border-radius: 6px;
      text-align: center;
      color: white;
      font-size: 15px;
      cursor: pointer;
    }
  }
  .nav {
    position: absolute;
    top: 45%;
    right: 50px;
    display: flex;
    .blue {
      width: 80px;
      color: white;
      height: 40px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 40px;
      }
    }
  }
}
.select {
  background-color: #00ffff;
  font-size: 18px;
  font-weight: bold;
}
</style>
